<!DOCTYPE html>
<html>
<head>
    <title>YOLOv5导出JSON</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 当页面加载完成后执行以下代码
        $(document).ready(  function() {
            // 监听表单提交事件
            $('#exportForm').submit(function(event) {
                event.preventDefault();

                // 获取用户输入的值
                var projectID = $('#projectID').val();
                //var token = $('#token').val();
               // var filePath = $('#filePath').val();
                var fileName = $('#fileName').val();


                // 发送POST请求到后端的Python脚本
               // $.post('/export', { projectID: projectID, token: token, filePath: filePath ,fileName:fileName })
                $.post('/export', { projectID: projectID, fileName:fileName })
                    .done(function(data) {
                        // 显示成功消息
                        $('#result').text(data);
                    })
                    .fail(function() {
                        // 显示错误消息
                        $('#result').text('Error exporting JSON content.');
                    });
            });
        });
    </script>
</head>
<body>
    <h1>YOLOv5导出JSON</h1>
    <form id="exportForm">
        <label for="projectID">项目ID：</label>
        <input type="text" id="projectID" required><br>

    <!--    <label for="token">令牌：</label>
        <input type="text" id="token" required><br>-->

        <!--<label for="filePath">文件路径：</label>
        <input type="text" id="filePath" required>-->

        <label for="fileName">文件命名：</label>
        <input type="text" id="fileName" required><br>

        <button type="submit">导出JSON</button>
    </form>

    <div id="result"></div>
</body>
</html>